<%--
    Document   : tabtest
    Created on : Jul 30, 2011, 3:56:12 PM
    Author     : Hoang
--%>

<%@page import="server.entity.Photo"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
        <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.14.custom.css" type="text/css" media="all" />
        <script>
            $(function() {
                $( "#tabs" ).tabs();
            });
        </script>
    </head>
    <body>
        <div class="demo">

            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Recently Photo</a></li>
                    <li><a href="#tabs-2">Top View Photo</a></li>
                    <li><a href="#tabs-3">Top Photo Comment</a></li>
                </ul>
                <div id="tabs-1">
                    <table>
                    <c:set value="0" var="i"/>
                    <c:forEach items="${lstRecently}" var="items">
                        <c:if test="${i==0}">
                            <tr>
                        </c:if>
                        <c:set value="${i+1}" var="i"/>
                        <td>
                            <table width="200" border="1">
                                <tr>
                                    <th colspan="3" scope="col">${items.photoName} </th>
                                </tr>
                                <tr>
                                    <td colspan="3"><img src="${items.serverFile}" width="200" height="150" /></td>
                                </tr>
                                <tr>
                                    <td>Upload date:${items.serverFile} </td>
                                    <td>View: ${items.views}</td>
                                    <td>Download: ${items.downloads}</td>
                                </tr>
                            </table>
                        </td>
                        <c:if test="${i==3}">
                            </tr>
                            <c:set var="i" value="${i+1}"/>
                        </c:if>
                    </c:forEach>
                    </table>
                </div>
                <div id="tabs-2">
                    <table>
                    <c:set value="0" var="i"/>
                    <c:forEach items="${lsttopview}" var="view">
                        <c:if test="${j==0}">
                            <tr>
                        </c:if>
                        <c:set value="${j+1}" var="j"/>
                        <td>
                            <table width="200" border="1">
                                <tr>
                                    <th colspan="3" scope="col">${view.photoName} </th>
                                </tr>
                                <tr>
                                    <td colspan="3"><img src="${view.serverFile}" width="200" height="150" /></td>
                                </tr>
                                <tr>
                                    <td>Upload date:${view.serverFile} </td>
                                    <td>View: ${view.views}</td>
                                    <td>Download: ${view.downloads}</td>
                                </tr>
                            </table>
                        </td>
                        <c:if test="${j==3}">
                            </tr>
                            <c:set var="j" value="${j+1}"/>
                        </c:if>
                    </c:forEach>
                    </table>
                </div>
                <div id="tabs-3">
                    <table>
                    <c:set value="0" var="k"/>
                    <c:forEach items="${lsttopcomment}" var="comment">
                        <c:if test="${k==0}">
                            <tr>
                        </c:if>
                        <c:set value="${k+1}" var="k"/>
                        <td>
                            <table width="200" border="1">
                                <tr>
                                    <th colspan="3" scope="col">${comment.photoName} </th>
                                </tr>
                                <tr>
                                    <td colspan="3"><img src="${comment.serverFile}" width="200" height="150" /></td>
                                </tr>
                                <tr>
                                    <td>Upload date:${comment.serverFile} </td>
                                    <td>View: ${comment.views}</td>
                                    <td>Download: ${comment.downloads}</td>
                                </tr>
                            </table>
                        </td>
                        <c:if test="${k==3}">
                            </tr>
                            <c:set var="k" value="${k+1}"/>
                        </c:if>
                    </c:forEach>
                    </table>
                </div>
            </div>

        </div><!-- End demo -->



        <div class="demo-description">
            <p>Click tabs to swap between content that is broken into logical sections.</p>
        </div><!-- End demo-description -->
    </body>
</html>
